<template>
  <view class="sort-main">
    <view :class="{activeSelection:activeIndex === 1}" @tap="confirm(0, 'asc'  , 1 )">默认排序</view>
    <view :class="{activeSelection:activeIndex === 2}" @tap="confirm(1,'desc'   , 2 )">新上{{text}}优先</view>
    <view
        v-if="showPrice"
        :class="{activeSelection:activeIndex === 3}" @tap="confirm(2, 'desc'  , 3 )">价格从高到低</view>
    <view
        v-if="showPrice"
        :class="{activeSelection:activeIndex === 4}" @tap="confirm(2, 'asc'  , 4 )">价格从低到高</view>
    <view v-if="!displayBuildMode">
      <view :class="{activeSelection:activeIndex === 5}" style="margin: 10px 0;" @tap="confirm(3, 'desc'  , 5 )">面积从大到小</view>
      <view :class="{activeSelection:activeIndex === 6}" style="margin: 10px 0;"  @tap="confirm(3, 'asc'  , 6 )">面积从小到大</view>
    </view>
   
    
  </view>
</template>

<script>
  export default {
    props:{
      displayBuildMode:{
        type: Boolean
      },
      showPrice:{
        type: Boolean,
        default(){
          return true
        }
      }
    },
    data() {
      return {
        sort: [0, 'asc'], // 排序筛选 0 默认排序 1 新上房源优先 2 价格 3  面积(格式：[0,'asc'](正向) [0,'desc'](反向))
        activeIndex: 1,
      }
    },
    methods: {
      confirm(num, ascOrDesc, index) {
        this.sort[0] = num;
        this.sort[1] = ascOrDesc
        this.activeIndex = index
        this.$emit('confirm',{
          sort: this.sort
        })
      }
    },
    computed:{
      text(){
        if (this.displayBuildMode){
          return '盘源'
        }else {
          return '房源'
        }
      }
    }
  }
</script>

<style>
  .sort-main {
    width: 100vw;
    padding: 10px 30px;
    background-color: white;
  }
  
  .activeSelection {
    color: #004fbf;
  }
  
  .sort-main > view {
    font-size: 12px;
    margin: 10px 0px;
  }
</style>
